<template>
  <div>
    <header>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>订单管理</el-breadcrumb-item>
        <el-breadcrumb-item>订单列表</el-breadcrumb-item>
      </el-breadcrumb>
    </header>
    <main>
      <div class="title">
        <el-input
          placeholder="请输入内容"
          v-model="input3"
          class="input-with-select"
          @keyup.enter.native="search"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="search"
          ></el-button>
        </el-input>
      </div>
      <el-table :data="orderList" stripe style="width: 100%" border>
        <el-table-column type="index"> </el-table-column>
        <el-table-column prop="order_number" label="订单编号">
        </el-table-column>
        <el-table-column prop="order_price" label="订单价格"> </el-table-column>
        <el-table-column prop="pay_status" label="是否付款">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.pay_status === '1'"
              >已付款</el-tag
            >
            <el-tag type="danger" v-else>未付款</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="is_send" label="是否发货"> </el-table-column>
        <el-table-column label="下单时间">
          <template slot-scope="scope">
            {{ new Date(parseInt(scope.row.create_time)).toLocaleString() }}
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              @click="editUser()"
            ></el-button>
            <el-button
              type="success"
              icon="el-icon-location"
              @click="showKuaidi(scope)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[1, 2, 5, 10]"
          :page-size="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </main>

    <el-dialog title="物流进度" :visible.sync="dialogVisible" width="30%">
      <el-timeline :reverse="false">
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :timestamp="activity.time"
        >
          {{ activity.context }}
        </el-timeline-item>
      </el-timeline>
    </el-dialog>
    <el-dialog title="修改地址" :visible.sync="dialogFormVisible">
      <el-form :model="formAddress" label-width="100px">
        <el-form-item
          label="省市区/县"
          :rules="[{ required: true, message: '请选择省市区/县' }]"
        >
          <el-cascader
            v-model="value"
            :options="options"
            @change="handleChange"
            @expand-change="more"
          ></el-cascader>
        </el-form-item>
        <el-form-item
          label="详细地址"
          label-width="100px"
          :rules="[{ required: true, message: '请输入详细地址' }]"
        >
          <el-input v-model="formAddress.address"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirmAddress">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getOrderList, getKuaidi } from "@/api/goods";
import { getProvince, getCity, getArea } from "@/api/area";
export default {
  name: "ShopOrders",
  data() {
    return {
      currentPage: 1,
      input3: "",
      orderList: [],
      page: {
        query: "",
        pagenum: 1,
        pagesize: 5,
      },
      activities: [],
      total: 0,
      dialogVisible: false,
      dialogFormVisible: false,
      formAddress: {
        area: "",
        address: "",
      },
      value: [],
      options: [],
    };
  },
  created() {
    this.getOrderList();
    getProvince().then((res) => {
      console.log(res);
      res.data.data.forEach((item) => {
        this.options.push({
          value: item,
          label: item,
          children: [],
        });
      });
    });
  },
  computed: {},
  methods: {
    more(value) {
      if (value.length == 1) {
        getCity({ pname: value[0] }).then((res) => {
          const index = this.options.findIndex(
            (item) => item.value == value[0]
          );
          this.options[index].children = res.data.data.map((item) => {
            return {
              value: item,
              label: item,
              children: [],
            };
          });
        });
      } else if (value.length == 2) {
        getArea({ pname: value[0], cname: value[1] }).then((res) => {
          const index = this.options.findIndex(
            (item) => item.value == value[0]
          );
          const index2 = this.options[index].children.findIndex(
            (item) => item.value == value[1]
          );
          this.options[index].children[index2].children = res.data.data.map(
            (item) => {
              return {
                value: item,
                label: item,
              };
            }
          );
        });
      }
    },
    async getOrderList() {
      const res = await getOrderList(this.page);
      //       console.log(res.data.data.goods, 12);
      this.orderList = JSON.parse(JSON.stringify(res.data.data.goods));
      this.total = res.data.data.total;
    },
    search() {
      console.log(this.input3);
      this.page = {
        query: this.input3,
        pagenum: 1,
        pagesize: 5,
      };
      this.getOrderList(this.page);
      this.$message.success("搜索成功");
    },
    async showKuaidi(scope) {
      const res = await getKuaidi(scope.row.order_id);
      this.activities = res.data.data;
      this.dialogVisible = true;
    },
    editUser() {
      this.dialogFormVisible = true;
    },
    handleSizeChange(val) {
      // console.log(val);
      this.page.pagesize = val;
      this.getOrderList(this.page);
    },
    handleCurrentChange(val) {
      this.page.pagenum = val;
      this.getOrderList(this.page);
    },
    handleChange(value) {
      this.formAddress.area = value.join("/");
    },
    confirmAddress() {
      this.$message.error("接口都没有改改改,改个屁");
      this.value = [];
      this.formAddress.address = "";
      this.dialogFormVisible = false;
    },
    cancel() {
      this.value = [];
      this.formAddress.address = "";
      this.$message.info("已取消编辑");
     this.dialogFormVisible = false;
    },
  },
};
</script>
<style lang='less'  scoped>
main {
  width: 100%;
  background-color: #fff;
  margin-top: 15px;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 2px 2px 10px #ccc;
  .title {
    display: flex;
    margin-bottom: 20px;
    .el-input {
      width: 500px;
      margin-right: 20px;
    }
  }
}
</style>
